<template>
	<w-container class='page-bg' :loading="loading">
		<w-navbar navType="default" id="my-nav" title="当前委托"></w-navbar>
		<Contracts :contractsTatal="contractsTatal" :list="contractsList" :loadingType="contractsLoadingType" />
		<view class="action plr-16">
			<w-button type="colorful" shape="circle"
				@click="$u.route('/pages/market/submitContracts',{id})">我要委托</w-button>
		</view>
	</w-container>
</template>

<script>
	import Contracts from './components/Contracts.vue'
	import {
		entrustList
	} from '@/api/market/index.js'
	export default {
		data() {
			return {
				id: '',
				contractsLoadingType: 'none',
				contractsSearch: {
					page: 1
				},
				contractsList: [],
				contractsTatal: 0,
				loading: true
			}
		},
		components: {
			Contracts
		},
		methods: {
			getContractsList(search) {
				if (this.contractsLoadingType == 'loading' || this.contractsLoadingType == 'nomore') return;
				this.contractsLoadingType = 'loading'
				entrustList({
					...search,
					collection_id: this.id
				}).then(res => {
					this.contractsLoadingType = 'none'
					this.contractsTatal = res.data.total_number
					if (res.data.data.data.length) {
						this.contractsSearch = search;
						res.data.data.data.map(v => {
							this.$set(this.contractsList, this.contractsList.length, v)
						})

					}
					if (res.data.data.data.length < 1 && search.page == 1) {
						this.contractsLoadingType = 'empty'
					}
				}).finally(() => {
					this.loading = false
					uni.stopPullDownRefresh()
				})
			},
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getContractsList(this.contractsSearch)
		},
		onPullDownRefresh() {
			let search = this.$tools.copyObj(this.contractsSearch)
			search.page = 1
			this.contractsList = []
			this.getContractsList(search)
		},
		onReachBottom() {
			let search = this.$tools.copyObj(this.contractsSearch)
			search.page++
			this.getContractsList(search)
		}
	}
</script>

<style lang="scss">
	.action {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding-top: 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		background-color: #fff;
	}
</style>